﻿@using System.Text.Json
@using Beaver
@using Beaver.Dtos
@using Beaver.Models
@using Beaver.Movies
@model IndexViewModel
@{
    ViewData["title"] = "首页";
}

<div class="layui-container">
    <partial name="_MovieSearchPartial" model="string.Empty" />

    <!-- 轮播图优化 -->
    <div class="layui-carousel" id="ID-carousel-demo-image">
        <div carousel-item>
            @foreach (var item in Model.Carousels)
            {
                <a asp-area="" asp-controller="Home" asp-action="Detail" asp-route-entId="@item.EntId" asp-route-catType="@item.Cat"
                   class="carousel-link" target="_blank" title="@item.Title">
                    <img src="@item.PicLists.Select(x => x.Url).FirstOrDefault()" class="carousel-img">
                    <div class="carousel-title">@item.Title</div>
                </a>
            }
        </div>
    </div>

    <!-- 排行榜优化 -->
    <div class="ranking-section">
        <h2 class="section-title">
            <i class="layui-icon layui-icon-chart"></i>
            热门排行榜
        </h2>

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">首页</li>
                <li>电视剧</li>
                <li>电影</li>
                <li>综艺</li>
                <li>儿童</li>
                <li>动漫</li>
                <li>经典</li>
            </ul>

            <div class="layui-tab-content">
                @foreach (var tops in Model.Movies)
                {
                    <div class="layui-tab-item @(tops.Key == MovieType.Default ? "layui-show" : null)">
                        <div class="movie-grid">
                            @foreach (var item in tops.Value)
                            {
                                <div class="movie-card">
                                    <a asp-area="" asp-controller="Home" asp-action="Detail"
                                       asp-route-entId="@item.EntId" asp-route-catType="@item.Cat"
                                       class="movie-link" target="_blank">
                                        <div class="movie-poster">
                                            <img src="@item.Cover" alt="@item.Title" loading="lazy">
                                            <div class="movie-overlay">
                                                <span class="play-icon">
                                                    <i class="layui-icon layui-icon-play"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="movie-info">
                                            <h3 class="movie-title">@item.Title</h3>
                                            <p class="movie-desc">@item.Description</p>
                                        </div>
                                    </a>
                                </div>
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<style>
    /* 轮播图样式优化 */
    .carousel-img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        object-position: center;
    }

    .carousel-link {
        position: relative;
        display: block;
    }

    .carousel-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
        color: white;
        padding: 20px;
        font-size: 18px;
        font-weight: bold;
    }

    /* 排行榜样式优化 */
    .ranking-section {
        margin-top: 30px;
    }

    .section-title {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .section-title .layui-icon {
            font-size: 28px;
            color: #FF5722;
        }

    /* 影片网格布局 */
    .movie-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
        padding: 20px 0;
    }

    /* 影片卡片样式 */
    .movie-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

        .movie-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

    .movie-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .movie-poster {
        position: relative;
        width: 100%;
        padding-top: 135%; /* 2:3 比例 */
        overflow: hidden;
    }

        .movie-poster img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

    .movie-card:hover .movie-poster img {
        transform: scale(1.05);
    }

    .movie-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .movie-card:hover .movie-overlay {
        opacity: 1;
    }

    .play-icon {
        width: 50px;
        height: 50px;
        background: rgba(255,87,34,0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
    }

    .movie-info {
        padding: 12px;
    }

    .movie-title {
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .movie-desc {
        font-size: 12px;
        color: #666;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 响应式优化 */
    @@media (max-width: 768px) {
        .movie-grid

    {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .carousel-img {
        height: 250px;
    }

    }

    @@media (max-width: 480px) {
        .movie-grid

    {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    }
</style>

@section Scripts {
    <partial name="_MovieSearchScriptsPartial" />
    <script type="text/javascript">
        layui.use(function(){
            var carousel = layui.carousel;

            // 渲染轮播图
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: 'auto',
                height: '380px',
                interval: 3000,
                anim: 'fade' // 添加淡入淡出效果
            });
        });
    </script>
}
